<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
    <div class="container text-center">
        <table class="table table-hover table-striped">
            <tr>
                <td>账号</td>
                <td>用户名</td>
                <td>密码</td>
                <td>操作</td>
            </tr>
            <tr th:each="user:${userList}"  th:id="|tr${user.userNumber}|">
                <td th:text="${user.userNumber}"></td>
                <td th:text="${user.userName}"></td>
                <td th:text="${user.userPassword}"></td>
                <td>
                    <a th:href="|javascript:searchUser('${user.userNumber}')|">编辑</a>
                    <a th:href="|javascript:deleteUser('${user.userNumber}');|">删除</a>
                </td>
            </tr>
        </table>
    </div>
    <!--        模态框       -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        更改信息
                    </h4>
                </div>
                <div class="modal-body  form-group">
                    <label for="userNumber">userNumber</label><input readonly class="form-control" type="text" id="userNumber" /> <br>
                    <label for="userName">userName</label><input class="form-control" type="text" id="userName" /> <br>
                    <label for="userEmail">userEmail</label><input class="form-control" type="text" id="userEmail" /> <br>
                    <label for="userTel">userTel</label><input class="form-control" type="text" id="userTel" /> <br>
<!--                    <label for="userBirth"></label><input type="text" id="userBirth" /> <br>-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <a type="button" class="btn btn-primary" th:href="|javascript:modifyUser()|">
                        提交更改
                    </a>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script>
    function deleteUser(userNumber) {
        $.ajax({
            url: '/Admin/deleteUser',
            type: 'POST',
            data: {userNumber: userNumber},
            success: function () {
                $("#tr" + userNumber).remove();
            },
            error: function (req, status, error) {
                alert("Ajax请求失败，错误：" + error);
            }
        });
    }
    function modifyUser(){
        var userNumber = $("#userNumber").val();
        var userName = $("#userName").val();
        var userEmail = $("#userEmail").val();
        var userTel = $("#userTel").val();
        $.ajax({
            url: '/Admin/modifyUser',
            type: 'POST',
            data: {userNumber: userNumber,userName:userName,userEmail:userEmail,userTel:userTel},
            success: function(){
                alert("修改成功");
            },
            error: function (req, status, error) {
                alert("Ajax请求失败，错误：" + error);
            }
        });
    }
    function searchUser(userNumber){
        $.ajax({
            url: '/Admin/searchUser',
            type: 'POST',
            data: {userNumber: userNumber},
            success: function(data){
                console.log(data);
                $("#userNumber").val(data.userNumber);
                $("#userName").val(data.userName);
                $("#userEmail").val(data.userinfoEmail);
                $("#userTel").val(data.userinfoTel);
                //$("#userBirth").val(data.userinfoBirth);
                $("#myModal").modal();
            },
            error: function (req, status, error) {
                alert("Ajax请求失败，错误：" + error);
            }
        });
    }
    </script>
</body>
</html>